<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>显示或隐藏下拉菜单</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			li {
				list-style: none;
			}
			a {
				text-decoration: none;
				color: #fff;
			}
			.w {
				width: 1200px;
				margin: 0 auto;
			}
			.header {
				height: 50px;
				line-height: 50px;
				background-color: #999;
			}
			.header > ul {
				width: 100%;
				height: 100%;
			}
			.header ul li {
				position: relative;
				float: left;
				width: 100px;
				height: 100%;
				line-height: 50px;
				
			}
			.header ul li a {
				position: absolute;
				height: 100%;
				line-height: 50px;
				padding: 0 30px;
				display: block;
				
				
			}
			.header ul li a::after {
				position: absolute;
				top: 50%;
				right: 0px;
				content: '';
				width: 10px;
				height: 10px;
				border-left: 2px solid #fff;
				border-top: 2px solid #fff;
				transform: translateY(-50%) rotate(-45deg);
				transition: all .3s ease;
			}
			
			.header ul li a:hover::after {
				transform:translateY(-70%) rotate(-135deg);
			}
			.con {
				position: absolute;
				bottom: 0;
				top: 50px;
				display: none;
				transition: all .3s;
			}
			.header .con li {
				width: 98px;
				height: 40px !important;
				line-height: 40px;
				text-align: center;
				border-left: 1px solid #ccc;
				border-right: 1px solid #ccc;
				border-bottom: 1px solid #ccc;
			}
		</style>
	</head>
	<body>
		<div class="header w">
			<ul>
				<li>
					<a href="#">新闻</a>
					<ul class="con">
						<li>111</li>
						<li>111</li>
						<li>111</li>
					</ul>
				</li>
				<li>
					<a href="#">新闻</a>
					<ul class="con">
						<li>222</li>
						<li>222</li>
						<li>222</li>
					</ul>
				</li>
			</ul>
			
			<script type="text/javascript">
				//获取到每个下拉li元素
				var uls = document.querySelector('.header ul');
				var lis = uls.children;
//				console.log(lis);
				//遍历每一个li,绑定事件,如果鼠标经过当前的li的话，显示当前li下面的第二个元素
				for(var i = 0; i < lis.length; i++) {
					lis[i].onmouseover = function() {
						this.children[1].style.display = 'block'
					}
					
					lis[i].onmouseout = function() {
						this.children[1].style.display = 'none'
					}
				}
			</script>
		</div>
	</body>
</html>
